<template>
  <BaseContainer class="report-table-wrapper" v-loading="loading" element-loading-text="加载中..."
    element-loading-background="rgba(255, 255, 255, 0.8)">
    <div class="t-header">
      <div class="article-title">
        <p class="text-tip" v-if="!otherData?.allData" @click="drawer = !drawer" v-show="params" id="no-print"
          :style="{ opacity: 1, '--base-text-bg': '#dc8844af' }">
          <span class="tip-text-new">名单</span>
        </p>
        <span>南京市养老机构综合运营补贴核算人员统计表</span>
      </div>
      <p class="text-sm">
        （所属月份： <span class="text-underline">{{ model.year }}</span>年<span class="text-underline">{{ model.month
          }}</span> 月）
      </p>
    </div>
    <div class="flex space-between">
      <div style="min-width: 140px">填报单位（盖章）：{{ modelData.reportingUnit }}</div>
      <div>填报时间：{{ modelData.fillingTime }}</div>
    </div>
    <ReportTable :column="colConfigList" :isDetail="true" :baseModel="baseModel" :model="modelData" @change="handleSave">
      <template v-slot:additional>
        <div class="flex align-center">
          1.另有
          <div>
            <el-input v-if="!isDetail" v-model="modelData.unconditionsNum" style="width:80px;padding:0 10px;"
              @change="handleSave" />
            <span v-else>{{ modelData.unconditionsNum || 0 }}</span>
          </div>
          人不符合补贴条件，其中未满 60 周岁
          <div>
            <el-input v-if="!isDetail" v-model="modelData.underYears" style="width:80px;padding:0 10px;"
              @change="handleSave" />
            <span v-else>{{ modelData.underYears || 0 }}</span>
          </div>
          人，政府供养
          <div>
            <el-input v-if="!isDetail" v-model="modelData.governmentSupport" style="width:80px;padding:0 10px;"
              @change="handleSave" />
            <span v-else>{{ modelData.governmentSupport || 0 }}</span>
          </div>
          人。
        </div>
      </template>
      <template v-slot:totalNum>
        <p>合计人数：{{ modelData.totalNum }} 人，其中失能 {{ modelData.mediationAssistanceNum }}人，半失能{{ modelData.careNum }} 人。
        </p>
      </template>
    </ReportTable>
    <div style="display: flex;margin-top: 10px;">
      填表人：
      <el-input style="width: 100px;" v-if="!isDetail" v-model="modelData.preparer" @blur="handleSave"></el-input>
      <p v-else>{{ modelData.preparer }}</p>
    </div>


    <el-drawer size="75%" append-to-body v-model="drawer" :with-header="false" @close="onClose">
      <ObjectStatistics v-if="drawer" :nowRowData="{
        ...model,
        creditCode: creditCode,
        idCard: nowInfo.idCard,
        createTimeBetween: nowInfo.createTimeBetween,
      }" :isCondition="isCondition"></ObjectStatistics>
    </el-drawer>
  </BaseContainer>
</template>

<script setup lang="ts">
import ReportTable from '../ReportTable/index.vue'
import apiMod from '@/apiMod'
import ObjectStatistics from './ObjectStatistics/index.vue'

const props = defineProps<{
  otherData?: any
  params?: any
  creditCode?: string | number
  editData?: any
  isDetail?: boolean
  caseId?: string | number
  custome?: boolean
  approvalStatus?: string | number
}>()

const emit = defineEmits(['save'])

const model = ref({
  year: '',
  month: '',
})
const drawer = ref(false)
const baseModel = shallowRef({})
const loading = ref(false)
const nowInfo = ref({
  idCard: '',
  createTimeBetween: '',
})
const modelData: any = ref({})
const isCondition = ref(false)
const onClose = () => {
  getInitData()
}

const tableColumnConfig = () => {
  const dataObj = {
    0: {
      label: '失能',
      data: modelData.value.serviceObjectSubsidyCareList || []
    },
    1: {
      label: '半失能',
      data: modelData.value.serviceObjectSubsidyAssistanceList || []
    },
  }
  const formateData = (data, title) => {
    const tempData = data.map((item, index) => {
      let mcObj
      if (index == 0) {
        mcObj = {
          m: title,
          bl: 1,
          fs: 16,
          mc: {
            rs: data.length,
            cs: 1,
          },
        }
      }
      const tempObj = [
        {
          m: index + 1,
        },
        mcObj,
        {
          m: item.name,
        },
        {
          m: item.idCard,
        },
        {
          m: item.crAddress,
        },
        {
          m: item.checkinDate,
        },
        {
          m: item.checkoutDate,
        },
        {
          m: item.checkinRoom,
        },
        {
          m: item.folkPhone,
        },
        {
          m: item.note,
          isMore: true,
        },
      ].filter(Boolean)

      return tempObj
    })
    return tempData
  }
  let baseHeader = [
    {
      m: '序号',
      bl: 1,
      fs: 16,
    },
    {
      m: '护理类别',
      bl: 1,
      fs: 16,
    },
    {
      m: '姓名',
      bl: 1,
      fs: 16,
    },
    {
      m: '身份证号码',
      bl: 1,
      fs: 16,
    },
    {
      m: '户籍',
      bl: 1,
      fs: 16,
    },
    {
      m: '入院时间',
      bl: 1,
      fs: 16,
    },
    {
      m: '出院时间',
      bl: 1,
      fs: 16,
    },
    {
      m: '房号',
      bl: 1,
      fs: 16,
    },
    {
      m: '家属电话',
      bl: 1,
      fs: 16,
    },
    {
      m: '备注',
      bl: 1,
      fs: 16,
    },
  ]

  const dataList = [
    [...baseHeader],
    ...formateData(dataObj[0].data, '失能'),
    ...formateData(dataObj[1].data, '半失能'),
    [
      {
        m: '合计人数',
        prop: 'totalNum',
        align: 'left',
        mc: {
          rs: 1,
          cs: baseHeader.length,
        },
      },
    ],
    [
      {
        m: '填表说明',
        mc: {
          rs: 3,
          cs: 1,
        },
      },
      {
        m: `1.另有 ${modelData.value.unconditionsNum || 0} 人不符合补贴条件，其中未满 60 周岁 ${modelData.value.underYears || 0} 人，政府供养${modelData.value.governmentSupport || 0
          } 人。`,
        align: 'left',
        prop: 'additional',
        mc: {
          rs: 1,
          cs: baseHeader.length - 1,
        },
      },
    ],
    [
      {
        m: '2.本表只填写符合补贴条件的对象；外出者要在备注栏说明事由及时间；',
        align: 'left',
        mc: {
          rs: 1,
          cs: baseHeader.length - 1,
        },
      },
    ],
    [
      {
        m: '3.新入住老人需有老人能力评估证明。',
        align: 'left',
        mc: {
          rs: 1,
          cs: baseHeader.length - 1,
        },
      },
    ],
  ]
  return dataList
}

const colConfigList = ref(tableColumnConfig())
const getInitData = async () => {
  const params = props.params || {}
  const query = {
    year: '',
    month: '',
    creditCode: props.creditCode,
    projectId: props.params.subsidyProjectId,
  }
  if (params.belongDate) {
    query.year = params.belongDate.replace('年', '-').replace('月', '').split('-')[0]
    query.month = params.belongDate.replace('年', '-').replace('月', '').split('-')[1]
    model.value.year = query.year
    model.value.month = query.month
  } else {
    return
  }

  try {
    const condition = (props.caseId && props.isDetail) || props.custome || props.approvalStatus == -2
    isCondition.value = condition
    modelData.value = props.editData
    if (!condition) {
      loading.value = true
      const result1 = await apiMod.view_metadata_statistics(query).then((res) => res.data)
      const reportData = await apiMod.view_serviceObjectSubsidyStatistics_result(query).then((res) => res.data)
      loading.value = false
      modelData.value = {
        ...reportData,
        underYears: props.editData.underYears || result1.underYears,
        unconditionsNum: props.editData.unconditionsNum || result1.unconditionsNum,
        governmentSupport: props.editData.governmentSupport || result1.governmentSupport,
        preparer: props.editData.preparer || result1.preparer
      }
      handleSave()
    }
    colConfigList.value = tableColumnConfig()
  } catch (error) {
    loading.value = false
  }
}
onMounted(() => {
  if (props.params) getInitData()
})

const handleSave = () => {
  emit('save', modelData.value, 'report_1003', props.editData)
}
</script>

<style scoped lang="scss">
.text-underline {
  text-decoration: underline;
  padding: 0 6px;
}

.report-table-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 10px 30px;
  top: 0;

  .t-header {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0;

    .text-sm {
      font-weight: 400;
      font-size: 16px;
    }
  }
}

.article-title {
  position: relative;
  z-index: 0;
  width: 63%;
  margin: 0 auto;
}

.text-tip {
  --base-text-bg: rgb(56 176 255 / 13%);
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--base-text-bg);
  padding: 4px;
  z-index: -1;

  &:hover {
    cursor: pointer;
  }

  .tip-text-new {
    position: absolute;
    right: 0;
    top: -10px;
    color: #fff;
    border-radius: 4px;
    padding: 2px;
    width: 40px;
    background-color: #ed6d05;
  }

  .tip-text-detail {
    background-color: #179fe3;
    position: absolute;
    right: 0;
    top: -10px;
    color: #fff;
    border-radius: 4px;
    padding: 2px;
    width: 40px;
  }
}
</style>
